<template>
	<view class="zy-column-full">
		<!-- 头部 -->
		<view style="position: relative;height: 480rpx;">
			<image src="@/static/img/mine-bg.png" style="width: 100%; height: 400rpx;" mode="aspectFill"></image>
			<view class="zy-column-between"
				style="position: absolute; top: 0; left: 0; right: 0; z-index: 99; height: 100%;">
				<zy-title title="Mine" titleWhite hideBack right-icon="/static/img/set-black.png"></zy-title>
				<view class="zy-column-center-v zy-bg-white-r30 zy-mh-50 zy-pb">
					<image :src="getTestImage()"
						style="width: 150rpx; height: 150rpx; border-radius: 50%; margin-top: -90rpx;"></image>
					<view class="zy-text-black-lg zy-mt-sm">9*****1847</view>
					<view class="zy-row-center">
						<view class="zy-row-center zy-btn-blue-sm-capsule">
							<image src="@/static/img/mine-vip1.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-white-sm">400</view>
						</view>
						<view class="zy-row-center zy-btn-yellow-sm-capsule zy-ml">
							<image src="@/static/img/mine-vip2.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-white-sm">200</view>
						</view>
						<view class="zy-row-center zy-btn-red-sm-capsule zy-ml">
							<image src="@/static/img/mine-vip3.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-white-sm">200</view>
						</view>
						<view class="zy-row-center zy-btn-yellow-sm-capsule zy-ml">
							<image src="@/static/img/mine-vip4.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-white-sm">200</view>
						</view>
					</view>
					<view class="zy-row-center zy-mt">
						<view class="zy-row-center zy-btn-gray-sm-capsule">
							<image src="@/static/img/mine-vip4.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-black-sm">400</view>
						</view>
						<view class="zy-row-center zy-btn-gray-sm-capsule zy-ml">
							<image src="@/static/img/mine-vip5.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-black-sm">200</view>
						</view>
						<view class="zy-row-center zy-btn-gray-sm-capsule zy-ml">
							<image src="@/static/img/mine-vip6.png" style="width: 40rpx;" mode="widthFix"></image>
							<view class="zy-text-black-sm">200</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 滚动部分 -->
		<scroll-view class="zy-scroll zy-page-padding" scroll-y>
			<!-- cell-1 -->
			<view class="zy-bg-white-r30 zy-mt-lg zy-pv-lg">
				<view class="zy-row-between zy-mh zy-mb">
					<view class="zy-text-black-lg"> Baki akaun </view>
					<view class="zy-row">
						<view class="zy-text-gray-sm">Tambah nailai pengeluarn</view>
						<zy-arrow-right></zy-arrow-right>
					</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-row-center zy-mt">
					<view class="zy-text-main-lg-bold">₱</view>
					<view class="zy-text-main-lg-super-bold zy-ml-sm">4,987.51</view>
				</view>
			</view>
			<!-- cell-2 -->
			<view class="zy-bg-white-r30 zy-mt-lg zy-pv-lg">
				<view class="zy-row-between zy-mh zy-mb">
					<view class="zy-text-black-lg"> keuntungan saya </view>
					<view class="zy-row">
						<view class="zy-text-main zy-font-bold">₱</view>
						<view class="zy-text-main-lg-bold zy-ml-sm">1999.00</view>
						<zy-arrow-right></zy-arrow-right>
					</view>
				</view>
				<zy-line></zy-line>
				<view class="zy-row-center zy-mt">
					<view class="zy-column-center zy-flex-width">
						<view class="zy-text-gray-sm">Subsidi iklan</view>
						<view class="zy-row">
							<view class="zy-text-main-sm zy-font-bold">₱</view>
							<view class="zy-text-main zy-font-bold zy-ml-sm">1999.00</view>
						</view>
					</view>
					<view class="zy-column-center zy-flex-width">
						<view class="zy-row-center zy-text-gray-sm" style="text-align: center;">Komisen penjualan</view>
						<view class="zy-row">
							<view class="zy-text-main-sm zy-font-bold">₱</view>
							<view class="zy-text-main zy-font-bold zy-ml-sm">1999.00</view>
						</view>
					</view>
					<view class="zy-column-center zy-flex-width">
						<view class="zy-text-gray-sm">Komisen promosi</view>
						<view class="zy-row">
							<view class="zy-text-main-sm zy-font-bold">₱</view>
							<view class="zy-text-main zy-font-bold zy-ml-sm">1999.00</view>
						</view>
					</view>
				</view>
			</view>
			<!-- cell-3 -->
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell1.png" label="Baucar saya" @click="toRecharge"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell2.png" label="Laporan setiap minggu" @click="toRechargeNilai"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell3.png" label="Bonus wang tunai" @click="toWithdrawList"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell4.png" label="Jemput rakan" @click="toWithdraw"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell5.png" label="Perkhidmatan pelangan" @click="toBuyVip"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell6.png" label="Memuatkan turun Aplikasi" @click="toComplete"></mine-cell-item>
			<mine-cell-item class="zy-mt" icon="/static/img/mine-cell7.png" label="Pemberitahuan" @click="toShare"></mine-cell-item>
			<!-- 按钮 -->
			<zy-button class="zy-mt-50" content="Next" @click="toOrderZone50"></zy-button>
		</scroll-view>
		
		<!-- popup -->
		<popup-mine ref="popup"></popup-mine>
	</view>
</template>

<script>
	import RouteUtil from '@/common/RouteUtil'
	export default {
		data() {
			return {

			}
		},
		methods: {
			open(){
				this.$refs.popup.open()
			},
			toRecharge(){
				RouteUtil.toRecharge()
			},
			toRechargeNilai(){
				RouteUtil.toRechargeNilai()
			},
			toWithdrawList(){
				RouteUtil.toWithdrawList()
			},
			toWithdraw(){
				RouteUtil.toWithdraw()
			},
			toBuyVip(){
				RouteUtil.toBuyVip()
			},
			toComplete(){
				RouteUtil.toComplete()
			},
			toShare(){
				RouteUtil.toShare()
			},
			toOrderZone50(){
				RouteUtil.toOrderZone50()
			}
		}
	}
</script>

<style lang="scss" scoped>
.cell-item{
	height: 116rpx;
	background: #FFFFFF;
	box-shadow: 36rpx 36rpx 73rpx 0rpx rgba(211,209,216,0.25);
	border-radius: 108rpx;
	padding-left: 20rpx;
	padding-right: 50rpx;
}
</style>